<template>
    <div id="pagination">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page"
        :page-sizes="sizes"
        :page-size="limit"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>
</template>

<script>
    export default {
      props:['total','page','limit'],
        name: "pagination",
      data(){
        return{
          sizes:[1,5,10,15,20,25,30],
          currentPage:1,
          currentLimit:5
        }
      },
      computed:{
        param(){
          const {currentPage,currentLimit} = this
          return{
            currentPage,currentLimit
          }
        }
      },
      watch:{
        param:{
          handler(){
            this.changePage(this.currentLimit)
          }
        }
      },
      mounted(){
        this.changePage(this.limit)
      },
      methods:{
        changePage(limit){
          this.$emit('changePage',this.currentPage,limit)
        },
        handleSizeChange(val) {
          this.currentLimit = val
        },
        handleCurrentChange(val) {
          this.currentPage = val
        }
      }
    }
</script>

<style scoped>

</style>
